<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<script type="text/javascript" src="/<a href="view-source:http://code.jquery.com/jquery-latest.js">http://code.jquery.com/jquery-latest.js</a>"></script> 
<script type="text/javascript"> 
$(document).ready(function(){

	$("ul.subnav").parent().append("<span></span>"); 
         //Only shows drop down trigger when js is enabled - Adds empty span tag after ul.subnav
	
	$("ul.topnav li span").click(function() { 
        //When trigger is clicked...
		
		//Following events are applied to the subnav itself (moving subnav up and down)
		$(this).parent().find("ul.subnav").slideDown('fast').show(); 
                //Drop down the subnav on click

		$(this).parent().hover(function() {
		}, function(){	
			$(this).parent().find("ul.subnav").slideUp('slow'); 
                        //When the mouse hovers out of the subnav, move it back up
		});

		//Following events are applied to the trigger (Hover events for the trigger)
		}).hover(function() { 
			$(this).addClass("subhover"); 
                        //On hover over, add class "subhover"
		}, function(){	//On Hover Out
			$(this).removeClass("subhover"); 
                        //On hover out, remove class "subhover"
	});

});
</script>

</head>
 <link rel="stylesheet" type="text/css" href="Untitled-3.css"/>
<body>
<div>
<ul class="topnav">

    <li><a href="#">Home</a></li>

    <li>

        <a href="#">Tutorials</a>

        <ul class="subnav">

            <li><a href="#">Sub Nav Link</a></li>

            <li><a href="#">Sub Nav Link</a></li>

        </ul>

    </li>

    <li>

        <a href="#">Resources</a>

        <ul class="subnav">

            <li><a href="#">Sub Nav Link</a></li>

            <li><a href="#">Sub Nav Link</a></li>

        </ul>

    </li>

    <li><a href="#">About Us</a></li>

    <li><a href="#">Advertise</a></li>

    <li><a href="#">Submit</a></li>

    <li><a href="#">Contact Us</a></li>

</ul> 
</div>
</body>
</html>
